<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <style media="screen">
        ul{
            list-style-type: none;
            padding: 0%;
        }
        li{
            padding: 15px;
            border-bottom: solid 1px #eee;
            background-color: #ddd;
        }
        .sidebar{
            background-color: #eee;
            box-shadow: 1px 03px #888888;
            position: absolute;
            width: 15rem;
            height: 100%;
        }
        .sidebar-transition{
            opacity: 0;
            left: -15px;
        }
        .sidebar-transition-active{
            opacity: 1;
            left: 0;
            transition: 0.5s;
        }
    </style>

</head>
<body>
    <header>
        <button onclick="document.querySelector('.sidebar').classList.add(
            'sidebar-transition-active');">&#9776</button>
    </header>
    <div class="sidebar sidebar-transition">
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
</body>
</html>